<template>
    <div>
        <el-table :data="tableData"  border  style="width: 100%;" >
            <el-table-column prop="id" label="序号"  />
            <el-table-column prop="account" label="账号" />
            <el-table-column prop="userGroup" label="用户组" />
            <el-table-column  label="创建时间" >
                <template #default="scoped">
                    {{ formatTime(scoped.row.ctime) }}
                </template>
            </el-table-column>
            <el-table-column  label="操作" >
                <template #default="scoped">
                    <el-button type="primary" @click="editBtn(scoped.row)">编辑</el-button>
                    <el-button type="danger" @click="del(scoped.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <el-pagination
        v-model:current-page="formData.currentPage"
        v-model:page-size="formData.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
        </div>
    </div>

    <el-dialog v-model="showEditModal" title="编辑用户信息" width="600">
        <el-form :model="editForm">
        <el-form-item label="账号名"   >
            <el-input v-model="editForm.account"  placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="用户组" >
            <el-select v-model="editForm.userGroup" placeholder="请选择用户组">
            <el-option label="超级管理员" value="超级管理员" />
            <el-option label="普通管理员" value="普通管理员" />
            </el-select>
        </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="showEditModal = false">取消</el-button>
            <el-button type="primary" @click="editAccountBtn">
            确认修改
            </el-button>
        </div> 
        </template>
    </el-dialog>



</template>

<script setup>
import {ref,reactive} from 'vue'
import {accountList,accountDel,accountEdit} from '@/api/account'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
const tableData = ref([])
const total = ref(0)
const formData= reactive({
    currentPage:1,
    pageSize:5
})

// 弹窗显示 隐藏
const showEditModal = ref(false)
const editForm = reactive({
    id:'',
    account:'',
    userGroup:''
})

// 请求第1页的数据
const getAccountList= async()=>{
     let res = await accountList(formData)
     tableData.value = res.data;
     total.value = res.total

}
getAccountList()

// 当前页发生改变 重新请求接口
const handleCurrentChange = (val) => {
    getAccountList()
}
// 每页数据长度发生改变  重新请求接口
const handleSizeChange = (val) => {
    getAccountList()
}

// 日期转换
const formatTime = (time)=>{
    // dayjs 
   return  dayjs(time).format('YYYY年MM月DD日 HH:mm:ss');       
}

// 删除用户
const del = async(id)=>{
   let {code,msg} = await accountDel({id})
 
    //    提示用删除成功
    if(code ==0){
        ElMessage.success(msg)
        // 重新请求接口
        getAccountList()
    }else{
        ElMessage.error(msg)
    }
}

const editBtn = ({id,account,userGroup})=>{
  
  
    editForm.id=id;
    editForm.account=account;
    editForm.userGroup=userGroup;
    
    showEditModal.value=true
}



// 点击弹窗中的确认修改按钮 调用接口
const editAccountBtn = async()=>{
    let {code,msg} = await accountEdit(editForm)
    // 如果修改成功
    if(code ==0){
        // 隐藏弹窗
        showEditModal.value = false
        // 提示用户 修改成功
        ElMessage.success(msg)
        // 重新请求列表数据 
        getAccountList()
    }else{
        ElMessage.error(msg)
    }
    // 隐藏弹窗  
    // 提示用户 修改成功
    // 重新请求列表数据 
}









</script>

<style lang="scss" scoped>
.page{
    margin-top: 20px;
}
</style>